<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-form-item label="" prop="name"
    ><el-input
      type="text"
      autocomplete="off"
      v-model="ruleForm.name"
      prefix-icon="el-icon-user-solid"
      placeholder="请输入用户名"
    ></el-input
    ></el-form-item>
    <el-form-item label="" prop="pass"
    ><el-input
      type="password"
      autocomplete="off"
      v-model="ruleForm.pass"
      prefix-icon="el-icon-lock"
      placeholder="请输入密码"
    ></el-input
    ></el-form-item>
    <el-form-item label="" prop="checkPass"
    ><el-input
      type="password"
      autocomplete="off"
      v-model="ruleForm.checkPass"
      prefix-icon="el-icon-lock"
      placeholder="请输入密码"
    ></el-input
    ></el-form-item>
    <el-form-item label="" prop="usertypeid">
      <el-input v-model="ruleForm.usertypeid" placeholder="请输入用户类型"></el-input>
    </el-form-item >

    <el-form-item label="请上传用户图片" prop="url">
    <el-upload
      class="avatar-uploader"
      action="/api/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </el-form-item >
    <el-form-item label="" prop="useremail">
      <el-input v-model="ruleForm.useremail" placeholder="请输入用户邮箱"></el-input>
    </el-form-item>
    <el-form-item label="" prop="email">
      <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
      <el-button type="primary" @click="getCode()">获取验证码</el-button>
    </el-form-item>
    <el-form-item label="" prop="code" >
      <el-input v-model="ruleForm.code"  placeholder="请输入验证码"></el-input>
    </el-form-item>
    <el-form-item class="btns">
      <el-button type="primary" @click="submit()">立即验证</el-button>
    </el-form-item>
    <el-form-item class="btns">
      <el-button type="primary" @click="tijiao('ruleForm')">注册</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          // callback(new Error("请输入密码"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };


      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };


      return {
        activeName: "second",
        imageUrl:"",
        ruleForm: {
          name: "",
          pass: "",
          checkPass: "",
          email: "",
          code: "",
          usertypeid:"",
          useremail:"",
          url:""
        },
        rules: {
          name: [
            { required: true, message: "请输入您的名称", trigger: "blur" },
            { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
          ],
          pass: [
            { required: true, message: "请输入您的密码", trigger: "blur" },
            { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" },
          ],
          checkPass: [
            { required: true, validator: validatePass2, trigger: "blur" },
          ],
          useremail: [
            { required: true, message: '请输入邮箱名称', trigger: 'blur' },
            { min: 8, max: 17, message: "长度在 8 到 17 个字符", trigger: "blur" },
          ],
          usertypeid: [
            { required: true,  message: '请输入用户类型',trigger: "blur" },
            { min: 1, max: 1, message: "长度只能为 1 个字符", trigger: "blur" },
          ],
          code: [
            { required: true,message: '请输入邮箱验证码',  trigger: "blur" },
            { min: 4, max: 4, message: "长度只能为 4 个字符", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      tijiao(formName) {
        alert(formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('submit!!');
            this.$axios({
                  //这里的url路径是不能取消 / 的，因为路径必须带
                  url: '/api/user/regst',
                  params:{
                    name: this.ruleForm.name,
                    pass :this.ruleForm.pass,
                    usertypeid :this.ruleForm.usertypeid,
                    url : this.ruleForm.url,
                    useremail :this.ruleForm.useremail,
                  }
                }).then(res1=>{
                  if (res1.data.code==100){
                    alert("恭喜您注册成功!");
                  }else {
                    alert("很遗憾注册失败!");
                  }
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getCode() {
        alert(this.ruleForm.email);
        this.$axios.get("/api/user/mail/"+this.ruleForm.email).then(res2=>{
          if (res2.data.code==200){
            alert("发送成功!");
          }else {
            alert("发送失败!");
          }
        })
      },

      submit() {
        this.$axios.get("/api/user/regist/"+this.ruleForm.code).then(res3=>{
          if (res3.data.code==100){
            alert("通过验证!");
          }else {
            alert("验证失败!");
            this.ruleForm.code="";
          }
        })
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.ruleForm.url=res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }

    }

  };
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
